<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据分析</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../component/ui/css/ui.css" />
		<style>
		.square{
			position: relative;
			width: 100%;
			height: 0;
			padding-bottom: 100%; /* padding百分比是相对父元素宽度计算的 */
			margin-bottom: 30px;
		}
		.square-inner{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%; /* 铺满父元素容器，这时候宽高就始终相等了 */
		}
		.grid{
			display: grid;
			grid-template-columns: repeat(6, 1fr); /* 相当于 1fr 1fr 1fr */
			grid-template-rows: repeat(6, 1fr); /* fr单位可以将容器分为几等份 */
			grid-gap: 1%; /* grid-column-gap 和 grid-row-gap的简写 */
			grid-auto-flow: row;
		}
		.grid>div{
			font-size: 14px;
			line-height: 2;
			text-align: center;
		}
		.grid>div i{
			font-size : 40px;
		}
		</style>
	</head>
	<body class="pear-container">
		<div class="layui-row layui-col-space10">
			<div class="layui-col-md12">
				<div class="layui-row layui-col-space10">
					<div class="layui-col-md12">
						<div class="layui-card">
							<div class="layui-card-header">
								快捷菜单
							</div>
							<div class="layui-card-body">
								<div class="square">
  									<div class="square-inner grid" id="toparea">
									
									</div>
								</div>
							</div>
						</div>
					</div>
				


				</div>
			</div>

		</div>
		<script type="text/html" id="toptpl">
		{{# layui.each(d, function(index, el){ }}
			<div>
				<div class="pear-card" data-id="{{el.id}}" data-title="{{el.title}}" data-url="{{el.href}}">
					<i class="layui-icon {{el.icon}}"></i>
				</div>
				<span class="pear-card-title">{{el.title}}</span>
			</div>
		{{#  }); }}
		</script>
		<!--</div>-->
		<script src="/admin/config/config.js"></script>
		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/ui/ui.js"></script>
		<script>
			layui.use(['layer', 'element', 'laytpl'], function() {
				var $ = layui.jquery,
					layer = layui.layer,
					element = layui.element,
					laytpl = layui.laytpl;
				let route = getRoute();
				laytpl($('#toptpl').html()).render(route.desktops, function(html){
                    $('#toparea').html(html);
                })
				$("body").on("click", "[data-url]", function() {
					parent.layui.tab.addTabOnlyByElem("content", {
						id: $(this).attr("data-id"),
						title: $(this).attr("data-title"),
						url: $(this).attr("data-url"),
						close: true
					})
				})

			});
		</script>
	</body>
</html>
